<template>
  <div>
    <el-divider direction="vertical"></el-divider>
    <span style="font-size: 12px">文件信息</span>
    <el-switch
      style="margin-left: 50px"
      v-model="unread"
      @change="getTableData"
      active-color="#13ce66"
      inactive-text="只看未读"
      active-text="查询所有">
    </el-switch>
    <div style="margin-left: 18px; margin-top: 15px;">
      <el-radio-group v-model="fileType" size="mini" @change="getTableData">
        <el-radio-button label=0 >全部</el-radio-button>
        <el-radio-button label=1 >详细说明书</el-radio-button>
        <el-radio-button label=2 size="mini">生产事件</el-radio-button>
        <el-radio-button label=3 size="mini">测试文件</el-radio-button>
        <el-radio-button label=4 size="mini">设计文件</el-radio-button>
        <el-radio-button label=5 size="mini">上线清单</el-radio-button>
      </el-radio-group>

      <el-button size="mini" type="primary" icon="el-icon-upload" style="float: right;" @click="showUploadView">上传</el-button>
    </div>
    <el-table
      :data="tableData"
      size="mini"
      highlight-current-row
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" width="40" />
<!--      <el-table-column prop="explain" label="说明" width="100px"></el-table-column>-->
      <el-table-column prop="uploadTime" label="上传时间" width="150px"></el-table-column>
      <el-table-column prop="uploadUserName" label="上传人" width="90px"></el-table-column>
      <el-table-column label="文件" width="360px">
        <template slot-scope="scope">
          <el-badge value="new" :class="itemClass(scope.row.isLookUp)" :hidden="scope.row.isLookUp===1">
            <el-button type="text" size="mini" @click="downloadFile(scope.row)" >{{scope.row.fileName}}</el-button>
          </el-badge>
        </template>
      </el-table-column>
<!--      <el-table-column width="40px">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" size="mini">删除</el-button>-->
<!--          <el-button type="text" size="mini">修改</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="page.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next"
                   background :total="page.totalNum">
    </el-pagination>

    <el-dialog
      title="文件上传"
      :visible.sync="dialogVisible"
      width="560px"
      :before-close="handleClose">
      <el-form ref="form" :rules="rules" :model="form">
        <el-form-item label="文件类型:" prop="fileType" required>
          <el-select placeholder="请选择文件类型" v-model="form.fileType" style="width:520px" size="small">
            <el-option v-for="item in fileTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明:" prop="explain" required>
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.explain" style="width:520px" size="small" />
        </el-form-item>
        <el-form-item label="附件上传" required prop="flag">
          <el-upload
            ref="my-upload"
            class="upload-demo"
            :action=attachmentsUpload
            :data="form.upload"
            :headers="form.headers"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            multiple
            :limit="1">
            <div v-show="showUploadButton">
              <el-button size="small" type="primary" @click="refreshCode">点击上传</el-button>
            </div>
            <div slot="tip" class="el-upload__tip">不要超过50mb，且只能上传一个文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { findByGroup, save, download } from '@/api/filesUpload'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'tableList',
  props: ['groupId'],
  computed: {
    ...mapGetters([
      'attachmentsLocal',
      'attachmentsUpload'
    ])
  },
  data() {
    let checkExplain = (rule, value, callback) => { !value?callback(new Error('请输入说明')):callback()}
    let checkFlag = (rule, value, callback) => { !value?callback(new Error('请上传文件')):callback()}
    let checkFileType = (rule, value, callback) => { value===''?callback(new Error('请选择文件类型')):callback()}
    return {
      tableData: [],
      fileType: 0,
      dialogVisible: false,
      showUploadButton: true,
      loading: false,
      unread: false,
      fileTypeList: [
        {key: 1, label: '详细说明书'},
        {key: 2, label: '生产事件'},
        {key: 3, label: '测试文件'},
        {key: 4, label: '设计文件'},
        {key: 5, label: '上线清单'}
      ],
      page: {
        pageNum: 1,
        pageSize: 5,
        totalNum: 0
      },
      form: {
        explain: '',
        fileList: '',
        fileType: '',
        fileCode: '',
        upload: {},
        flag: false,
        headers: { Authorization: getToken() },
      },
      rules: {
        explain:  [{ validator: checkExplain, trigger: 'blur' }],
        flag: [{ validator: checkFlag, trigger: 'blur' }],
        fileType: [{ validator: checkFileType, trigger: 'blur' }],
      }
    }
  },
  methods: {
    itemClass(isLookUp) {
      return isLookUp===1?'':'item'
    },
    downloadFile(row) {
      download(row.fileCode, row.fileName)
    },
    refreshCode() {
      let date = new Date()
      this.form.upload.tempCode = "TMP" + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() + Math.round(Math.random() * 1000)
    },
    handleRemove() {
      this.showUploadButton = true
      this.form.flag = false
    },
    uploadSuccess(response) {
      this.form.fileCode = response
      this.showUploadButton = false
      this.form.flag = true
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.form.groupId = this.groupId
          save(this.form).then(_ => {
            this.dialogVisible = false
            this.showUploadButton = true
            this.loading = false
            this.$refs['form'].resetFields()
            this.$refs['my-upload'].clearFiles()
            this.getTableData()
          })
        }
      })
    },
    showUploadView() {
      this.dialogVisible = true
      this.form.explain = ''
      this.form.fileList = ''
      this.form.fileType = ''
      if (typeof this.$refs['form'] !==  'undefined') {
        this.$refs['form'].resetFields()
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.getTableData()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getTableData()
    },
    init(groupId) {
      let params = {
        groupId: groupId,
        isLookUp: this.unread?1:0,
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
        type: parseInt(this.fileType)
      }
      this.fileType = 0
      findByGroup(params).then(response => {
        this.tableData = response.content
        this.page.totalNum = response.totalNum
      })
    },
    getTableData() {
      let params = {}
      if (this.fileType==='0'||this.fileType===0) {
        params = {
          groupId: this.groupId,
          isLookUp: this.unread?1:0,
          pageSize: this.page.pageSize,
          pageNum: this.page.pageNum,
          type: parseInt(this.fileType)
        }
      } else {
        params = {
          groupId: this.groupId,
          isLookUp: this.unread?1:0,
          pageSize: this.page.pageSize,
          pageNum: this.page.pageNum,
          type: parseInt(this.fileType)
        }
      }
      findByGroup(params).then(response => {
        this.tableData = response.content
        this.page.totalNum = response.totalNum
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.userName === '合计') {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table .warning-row {
  background: #f0f9eb;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
